<div class="person-statistics">
  <mat-grid-list cols="2" rowHeight="80px">
    <mat-grid-tile>
      <button mat-raised-button matBadge="{{personTotal}}" matBadgePosition="after" matBadgeColor="primary" (click)="switchTable('allPerson')"><span [class]="allPersonClass">{{"totalPerson" | translate}}</span></button>
      <button mat-raised-button matBadge="{{personNormal}}" matBadgePosition="after" matBadgeColor="primary" (click)="switchTable('normalPerson')"><span [class]="normalPersonClass">{{"normalPerson" | translate}}</span></button>
      <button mat-raised-button matBadge="{{personAbnormal}}" matBadgePosition="after" matBadgeColor="warn" (click)="switchTable('abnormalPerson')"><span [class]="abnormalPersonClass">{{"abnormalPerson" | translate}}</span></button>
      <button mat-raised-button matBadge="{{personAway}}" matBadgePosition="after" matBadgeColor="warn" (click)="switchTable('awayPerson')"><span [class]="awayPersonClass">{{"leavePerson" | translate}}</span></button>
    </mat-grid-tile>

    <mat-grid-tile>
      <button mat-raised-button matBadge="{{deviceTotal}}" matBadgePosition="after" matBadgeColor="primary" (click)="switchTable('allDevice')"><span [class]="allDeviceClass">{{"totalDevice" | translate}}</span></button>
      <button mat-raised-button matBadge="{{deviceInUse}}" matBadgePosition="after" matBadgeColor="primary" (click)="switchTable('inUseDevice')"><span [class]="inUseDeviceClass">{{"inUseDevice" | translate}}</span></button>
      <button mat-raised-button matBadge="{{deviceToUse}}" matBadgePosition="after" matBadgeColor="primary" (click)="switchTable('toUseDevice')"><span [class]="toUseDeviceClass">{{"toUseDevice" | translate}}</span></button>
      <button mat-raised-button matBadge="{{deviceAbnormal}}" matBadgePosition="after" matBadgeColor="warn" (click)="switchTable('abnormalDevice')"><span [class]="abnormalDeviceClass">{{"abnormalDevice" | translate}}</span></button>
    </mat-grid-tile>
  </mat-grid-list>
</div>
<div  style="height: calc(100% - 80px);">
  <div class="wdl-table-container" style="overflow: visible;height: calc(100%);">
    <div class="poRight">
        <!-- <mat-toolbar-row> -->
          <div class="btn-group" style="text-align: center;">
            <button type="button" (click)="personDetail()"  id="userInfo" class="btn btn-light"  style="padding: 5px;margin-left:4px;border:0px solid #000;">
              <div class="task"></div>
            </button>
          </div>
         <div class="btn-group">
             <button type="button" class="btn btn-light" (click)="checkin()" style="padding: 10px;">
               <div class="search"></div>
             </button>
          </div>
          <div class="btn-group">
             <button type="button" class="btn btn-light" (click)="testclick()" style="padding: 10px;">
               <div class="list"></div>
             </button>
          </div>
          <div class="btn-group">
             <button type="button" class="btn btn-light"  style="padding: 10px;">
               <div class="refresh"></div>
             </button>
          </div>
        <!-- </mat-toolbar-row> -->
    </div>
    <div id ="mapContainer" style="width:100%;height: 100%"></div>

    <div id="up-map-div" style="display:none;">
      <div class="" style="height:50px;top:60px;background: #f5f5f5;">
        <div class="" style="float:left;width:50%;top:20px;">
          <div class="pdL40">
          <h6 style="line-height:50px;">{{selectPerson.personName}}</h6> <!--<h6 style="background: #b9e5e6;width:136px;text-align: right;padding:5px">正常卧床</h6>-->
          </div>
        </div>
        <div class="" style="float:right;width:30%">
          <div class="pdL40" style="margin-top:5px;">
            <button mat-button matSuffix mat-icon-button (click)="closemapdiv()" matTooltip="{{'close' | translate}}">
            <mat-icon svgIcon="close" style="color: darkblue;"></mat-icon>
          </button>
          </div>
        </div>
      </div>
      <div class="wdl-dialog-content pwizard-content" style="padding:10px;">
      <div class="">
        <div class="" style="float:left;width:50%">
          <div class="heart_red"></div>
          <div class="pdL40">
            <div>{{'heart' | translate}}</div>
            <div>{{selectPerson.heart}} {{'heartUnit'| translate}}</div>
            <div>{{selectPerson.hearttime}}</div>
          </div>
        </div>
        <div class="" style="float:left;width:50%">
          <div class="breathing_red"></div>
          <div class="pdL40">
            <div>{{'breathe' | translate}}</div>
            <div>{{selectPerson.curbreathe}} {{'heartUnit'| translate}}</div>
            <div>{{selectPerson.breathedate}}</div>
          </div>
        </div>
        <div class="" style="float:left;width:50%">
          <div class="blood_pressure"></div>
          <div class="pdL40">
            <div>{{'pressure' | translate}}</div>
            <div>{{selectPerson.pressureL}}-{{selectPerson.pressureH}} {{'pressureUnit'| translate}}</div>
            <div>{{selectPerson.hearttime}}</div>
          </div>
        </div>
        <div class="" style="float:left;width:50%">
          <div class="blood_sugar"></div>
          <div class="pdL40">
            <div>{{'sugar' | translate}}</div>
            <div>-- {{'sugarUnit'| translate}}</div>
            <div>---- --:--</div>
          </div>
        </div>
      </div>
      <div class="">
        <div class="mapTitle">
          <h1>{{'phone' | translate}}</h1>
          <h2>{{selectPerson.phone}}</h2>
        </div>
        <div class="mapTitle">
          <h1>所属</h1>
          <h2>{{selectPerson.bedString}}</h2>
        </div>
        <div class="mapTitle">
          <h1>所属电话</h1>
          <h2>{{selectPerson.phone}}</h2>
        </div>
        <div class="mapTitle">
          <h1>家属电话</h1>
          <h2>{{selectPerson.phone}}</h2>
        </div>
        <div class="mapTitle">
          <h1>{{'address' | translate}}</h1>
          <h2>{{selectPerson.address}}</h2>
        </div>
      </div>
      <div class="">
        <div class="">
          <mat-icon svgIcon="add" style="color: #b2b2b2;"></mat-icon>
          电子围栏
          <!--<div style="float:right;width:30%;">
            <div class="pdL40">
              <button type="button" class="btn btn-light" (click)="guardclick()">保存</button>
            </div>
          </div>
          <div style="float:right;width:30%;">
            <div class="pdL40">
              <button type="button" class="btn btn-light" (click)="selectclick()">选定中心</button>
            </div>
          </div>-->
        </div>
        <div class="">
          <div style="float:left;width:100%;margin-top:16px">
            <form [formGroup]="formGroup" class="form-container" novalidate autocomplete="off">
              <mat-form-field style="height: 70px;">
                <input formControlName="firstName" matInput placeholder="中心地址"><!--{{'personName' | translate}}-->
              </mat-form-field>
              <mat-form-field style="height: 70px;">
                <input class="mapTitle" formControlName="name" matInput placeholder="围栏范围（公里）"><!--{{'personName' | translate}}-->
              </mat-form-field>
            </form>
          </div>

        </div>
        <div class="">

          <div style="float:right;width:30%;">
            <div class="pdL40">
              <button type="button" class="btn btn-light" (click)="guardclick()">保存</button>
            </div>
          </div>
          <div style="float:right;width:30%;">
            <div class="pdL40">
              <button type="button" class="btn btn-light" (click)="selectclick()">选定中心</button>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>
</div>
<!-- <div [class]="getBgClass()">
<div *ngIf="showPersonDetails" class="person-grid-list">
  <mat-grid-list cols="1" rowHeight="400px">
    <mat-grid-tile>
      <app-cobject [person]="person" (hide)="hidePerson()"></app-cobject>
    </mat-grid-tile>
  </mat-grid-list>
</div>

<div *ngIf="showPersons()" [class]="getListClass()">
  <div class="wdl-loading-shade" *ngIf="showLoadingFlag">
    <mat-spinner *ngIf="showLoadingFlag"></mat-spinner>
  </div>

  <div class="wdl-table-container">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <ng-container matColumnDef="number">
        <th mat-header-cell *matHeaderCellDef>{{"number" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.number}}</td>
      </ng-container>

      <ng-container matColumnDef="personName">
        <th mat-header-cell *matHeaderCellDef>{{"name" | translate}}</th>
        <td mat-cell *matCellDef="let element">
          <div style="cursor: pointer;" (click)="openMonitor(element)" matTooltip="{{'openMonitor' | translate}}">{{element.personName}}</div>
        </td>
      </ng-container>

      <ng-container matColumnDef="building">
        <th mat-header-cell *matHeaderCellDef>{{"building" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.building}}</td>
      </ng-container>

      <ng-container matColumnDef="level">
        <th mat-header-cell *matHeaderCellDef>{{"level" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.level}}</td>
      </ng-container>

      <ng-container matColumnDef="room">
        <th mat-header-cell *matHeaderCellDef>{{"room" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.room}}</td>
      </ng-container>

      <ng-container matColumnDef="bed">
        <th mat-header-cell *matHeaderCellDef>{{"bed" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.bed}}</td>
      </ng-container>

      <ng-container matColumnDef="device1Id">
        <th mat-header-cell *matHeaderCellDef>{{"device1Id" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.device1Id}}</td>
      </ng-container>

      <ng-container matColumnDef="nurseName">
        <th mat-header-cell *matHeaderCellDef>{{"nurse" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.nurseName}}</td>
      </ng-container>

      <ng-container matColumnDef="state">
        <th mat-header-cell *matHeaderCellDef>{{"state" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{getAlarmText(element)}}</td>
      </ng-container>

      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element">
          <button mat-icon-button (click)="openMonitor(element)" matTooltip="{{'openMonitor' | translate}}">
            <mat-icon svgIcon="show" style="color: darkblue;"></mat-icon>
          </button>
          <button mat-icon-button (click)="openHist(element)" matTooltip="{{'openHist' | translate}}">
            <mat-icon svgIcon="hist" style="color: darkblue;"></mat-icon>
          </button>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
</div>

<div *ngIf="showDevices()" class="wdl-container mat-elevation-z8">
  <div class="wdl-loading-shade" *ngIf="showLoadingFlag">
    <mat-spinner *ngIf="showLoadingFlag"></mat-spinner>
  </div>

  <div class="wdl-table-container">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <ng-container matColumnDef="number">
        <th mat-header-cell *matHeaderCellDef>{{"number" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.number}}</td>
      </ng-container>

      <ng-container matColumnDef="deviceId">
        <th mat-header-cell *matHeaderCellDef>{{"deviceId" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.deviceId}}</td>
      </ng-container>

      <ng-container matColumnDef="personName">
        <th mat-header-cell *matHeaderCellDef>{{"bind" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.personName}}</td>
      </ng-container>

      <ng-container matColumnDef="updateTime">
        <th mat-header-cell *matHeaderCellDef>{{"updateTime" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{(element.updateTime === 0) ? '-' :  (element.updateTime | date: 'yyyy-MM-dd HH:mm:ss')}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumnsDevice; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumnsDevice;"></tr>
    </table>
  </div>
</div>
</div> -->
